<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '设备管理',
  },
}
</route>

<template>
  <view class="container">
    <wd-search
      v-model="value"
      @focus="focus"
      @blur="blur"
      @search="search"
      @clear="clear"
      @cancel="cancel"
      @change="change"
      cancel-txt="搜索"
    />
    <view v-for="index in num" :key="index" class="list-item">
      <wd-card style="margin: 0; padding: 12px" custom-title-class="custom_title">
        <view class="content">
          <image style="width: 30px; height: 30px" src="@/static/home/device.png" />
          <view class="ml-2">
            <view style="color: rgba(0, 0, 0, 0.85); font-size: 16px">
              娃娃机_{{ uuid()?.slice(0, 10) }}
            </view>
            <view style="color: rgba(0, 0, 0, 0.25); font-size: 12px">1元1币</view>
          </view>
        </view>

        <template #footer>
          <wd-button size="small" plain>查看详情</wd-button>
        </template>
      </wd-card>
    </view>
    <wd-loadmore :state="state" @reload="loadmore" />
  </view>
</template>

<script lang="ts" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { uuid } from 'wot-design-uni/components/common/util'

const state = ref<any>('loading')
const num = ref<number>(0)
const max = ref<number>(60)

onReachBottom(() => {
  if (num.value === 45) {
    state.value = 'error'
  } else if (num.value < max.value) {
    loadmore()
  } else if (num.value === max.value) {
    state.value = 'finished'
  }
})

onLoad(() => {
  loadmore()
})

function loadmore() {
  setTimeout(() => {
    num.value = num.value + 15
    state.value = 'loading'
  }, 200)
}

const value = ref<string>('')

function focus() {
  console.log('聚焦')
}
function blur() {
  console.log('失焦')
}
function search() {
  console.log('搜索')
}
function clear() {
  console.log('重置')
}
function cancel() {
  console.log('取消')
}
function change({ value }) {
  console.log('输入', value)
}
</script>

<style lang="scss" scoped>
.list-item {
  position: relative;
  //   display: flex;
  padding: 3px 10px;
  color: #464646;
}

.list-item:after {
  position: absolute;
  display: block;
  content: '';
  height: 1px;
  left: 0;
  width: 100%;
  bottom: 0;
  background: #eee;
  transform: scaleY(0.5);
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.content {
  justify-content: flex-start;
}

:deep(.wd-card__title-content) {
  display: none;
}
:deep(.wd-card__footer) {
  //   display: none;
  padding: 0;
}
</style>
